<template>
	<div class="modal">
		<Modal v-model="data.isShow" width="800" :mask-closable="false" :styles="{top: '20px'}">
			<p slot="header" class="header-view">续时</p>
			<div class="main-view">
				<div class="left-view">
					<Form ref="formValidate" :model="data.data" :rules="ruleValidate" :label-width="100">
						<FormItem label="影厅：">
							<p>{{data.row.name}}</p>
						</FormItem>
                        <FormItem label="会员卡号：" v-if="costDetailData.isMember == 1">
							<p>{{costDetailData.cardNo}}</p>
						</FormItem>
						<FormItem label="姓名：">
							<p>{{costDetailData.name}}</p>
						</FormItem>
						<FormItem label="手机号：">
							<p>{{costDetailData.phoneNum}}</p>
						</FormItem>
						<FormItem label="实到人数：">
							<p>{{costDetailData.number}}</p>
						</FormItem>
                        <FormItem label="本次结束时间：">
							<p>{{endTime}}</p>
						</FormItem>
						<!-- <FormItem label="计费方式：" prop="tollType">
							<RadioGroup v-model="data.tollType">
								<Radio label="1">
									<span>时段计费</span>
								</Radio>
								<Radio label="2">
									<span>固定收费</span>
								</Radio>
							</RadioGroup>
						</FormItem> -->
						<FormItem label="续时时长：" prop="hours">
							<InputNumber :min="0" v-model="data.data.hours" @on-blur="onBlur"></InputNumber>小时
						</FormItem>
					</Form>
				</div>
				<div class="right-view">
					<div class="statistics">
						<XPriceView :data="orderPriceData"></XPriceView>
					</div>
					<div class="pay-view">
						<XPaywayView
							:data="payWayData" :isMember="isMemberData" :orderPrice="orderPriceData.money">
						</XPaywayView>
					</div>
				</div>
			</div>
			<div slot="footer">
				<Button type="primary" :loading="data.isLoading" @click="clickSubmit">续时</Button>
				<Button @click="data.isShow = false">取消</Button>
			</div>
		</Modal>
		
	</div>
</template>

<script>
import roomService from '@/network/service/roomService.js'
import XPaywayView from '@/components/XPaywayView'
import XPriceView from '@/components/XPriceView'
import $ from 'jquery'
import {formatTimestamp} from '@/common/js/date_util.js'
export default {
	components: {XPriceView,XPaywayView},
	props: ['data'],
	data() {
		return {
			isMemberData: {
				isMember: false,
				isGiveCredit: '',
				creditLine: '',
				mstatus: null
			},
			ruleValidate: {
				hours: [
					{ required: true, message: '请输入开厅时长', trigger: 'blur', type: 'number' }
				],
			},
			orderPriceData: {},
			payWayData: {
				payWay: '2',
				isHand: '',
				password: ''
			},
			costDetailData: {},
			isContinue: false,
		}
	},
	mounted() {
		this.roomCostDetail();
	},
	watch: {
		'data.data.hours': function(val) {
			this.createTimeOrder();
		}
	},
	computed: {
		endTime() {
			return formatTimestamp(this.costDetailData.endTime);
		}
	},
	methods: {
		onBlur() {
			this.createTimeOrder();
		},
		clickSubmit () {
			let params = {
				id: this.orderPriceData.oid,
				payWay: this.payWayData.payWay,
				isHand: 0
			}
			if (this.payWayData.payWay == 2) {
				params.getMoney = this.orderPriceData.money
			} else if (this.payWayData.payWay == 8) {
				params.isHand = this.payWayData.isHand;
				params.handRoomId = this.data.row.rid
			} else if (this.payWayData.payWay == 1) {
				params.password = this.payWayData.password
			} else {
				params.getMoney = '';
			}
			this.$emit('on-submit', params, this.data);
		},
		
		createTimeOrder() {
			let params = {
				id: this.data.row.rid,
				hours: this.data.data.hours,
			};
			roomService.createTimeOrder(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.orderPriceData = result.data;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
		roomCostDetail() {
			roomService.roomCostDetail(this.data.row.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.costDetailData = result.data;
					if (result.data.isMember == 1) {
						this.isMemberData.isMember = true;
					}
				} else {
					this.$Message.error(resmsg);
				}
			},error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
	}
}	
</script>

<style scoped lang="less">
.header-view {
	text-align: center;
	font-size: .14rem;
	color: #433E41;
}
.main-view {
	display: flex;
	// height: 8.2rem;
	.left-view {
		color: #433E41;
		border-right: .01rem solid #D5CED2;
		width: 50%;
		height: 100%;
		padding-right: .2rem;
		.td {
			width: 1rem;
			text-align: right;
		}
		.input {
			border: 1px solid #D5CED2;
			border-radius: 5px;
		}
		.btn {
			width: 1.8rem;
		}
	}
	.right-view {
		width: 50%;
		padding: 0 .2rem;
		.statistics {
			margin-bottom: .3rem;
		}
	}
}

</style>